<template>
	<view>
		<view class="orderStatusWrapper">
			<text>{{orderInfo.orderStatus|longOrderStatus}}</text>
		</view>

		<view class="orderBasicWrapper">
			<view class="basicInfo">订单号：{{orderInfo.orderNo}}</view>
			<view class="basicInfo">用车人：{{orderInfo.memberName}}</view>
			<view class="basicInfo">联系电话：{{orderInfo.contactPhone}}</view>
			<!-- <view class="otherBox" v-if="orderInfo.orderStatus > 4 && orderInfo.orderStatus <=9">
				<text v-if="orderInfo.orderStatus > 4 && orderInfo.orderStatus < 9" @tap="goDepositRefund">押金退款</text>
				<text v-if="orderInfo.orderStatus == 9" @tap="goCheckCarInfo">取还单据</text>
			</view> -->
		</view>

		<view class="orderInfoBox">
			<view class="boxTitle">
				预定车型
			</view>
			<!-- 车辆 -->
			<view class="carContent">
				<image class="carImg" :src="orderInfo.url|mmvImageUrl" mode=""></image>
				<view class="carInfo">
					<view class="carInfo_name">{{orderInfo.modelName}}</view>
					<view class="carInfo_other">
						<text class="otherValue" v-if="orderInfo.speedChangingBox">{{orderInfo.speedChangingBox}}</text>
						<text class="otherValue" v-if="orderInfo.seating">{{' | ' + orderInfo.seating}}</text>
						<text class="otherValue" v-if="orderInfo.displacement">{{' | ' +orderInfo.displacement}}</text>
						<text class="otherValue" v-if="orderInfo.fuelType">{{' | ' +orderInfo.fuelType}}</text>
						<text class="otherValue" v-if="orderInfo.styleModel">{{' | ' +orderInfo.styleModel}}</text>
					</view>
				</view>
			</view>
			<view v-if="orderInfo.carNo.length > 0">{{orderInfo.carNo}}</view>
		</view>

		<view class="orderInfoBox">
			<view class="boxTitle">
				门店信息
			</view>
			<!-- 门店信息 -->
			<view class="storeBox">
				<view class="left">
					<text>取还车门店</text>
					<text>{{orderInfo.reserveStoreName|filterNull}}</text>
				</view>
				<view class="right">
					<image src="../../../static/common/location.png" mode="" @click="goNaviRoute(1)"></image>
					<image src="../../../static/common/callPhone.png" mode="" @click="goCallPhone(1)"></image>
				</view>
			</view>
			<view class="timeBox">
				<text>用车时间</text>
				<text>{{userTime}}</text>
			</view>
		</view>

		<view class="orderInfoBox" v-if="orderInfo.orderStatus !=8">
			<view class="boxTitle">
				基础费用
			</view>
			<!-- 基础信息 -->
			<view class="amountWrapper">
				<view class="amountDetail">
					<text>车辆租金</text>
					<text>￥{{orderInfo.rent}}</text>
				</view>
				<view class="amountDetail">
					<text>押金</text>
					<text>￥{{orderInfo.deposit}}</text>
				</view>
				<view class="amountDetail">
					<text>付款方式</text>
					<text>{{orderInfo.methodPayment}}</text>
				</view>
				<view class="amountDetail">
					<text>租期</text>
					<text>{{orderInfo.tenancyTerm + '期'}}</text>
				</view>
			</view>
		</view>

		<!-- 已支付明细 -->
		<view class="orderInfoBox" v-if="orderInfo.paymentDetailsList.length>0 && orderInfo.orderStatus !=8">
			<view class="boxTitle">
				支付明细
			</view>
			<text class="depositRefund" v-if="orderInfo.orderStatus == 7"
				@click="goDepositRefund">查看押金退款</text>
			<view class="costWrapper">
				<view class="payCost">
					<view class="paymentCost" v-for="(item, index) in orderInfo.paymentDetailsList" :key="index">
						<view class="amount">
							<text>¥{{item.accountAmount}}</text>
							<text>支付时间:{{item.paidTime}}</text>
						</view>
						<view class="other">
							<text>{{item.billType}}</text>
							<text v-if="item.termsNo === 0">¥{{item.accountAmount}}</text>
							<text v-else>¥{{item.accountAmount + '/' + item.termsNo + '期'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 本期待支付 -->
		<view class="orderInfoBox" v-if="orderInfo.detailsPaid.length>0 && orderInfo.orderStatus !=8">
			<view class="boxTitle">
				本期支付
			</view>
			<view class="costWrapper">
				<view class="payCost">
					<view class="paymentCost" v-for="(item, index) in orderInfo.detailsPaid" :key="index">
						<view class="amount">
							<text>¥{{item.accountAmount}}</text>
							<text class="remark" v-if="item.remark != null">{{item.remark}}</text>
						</view>
						<view class="other">
							<text>{{item.billType}}</text>
							<!-- 第0期代表的是押金 -->
							<text v-if="item.termsNo === 0">¥{{item.accountAmount}}</text>
							<text v-else>¥{{item.accountAmount + '/' + item.termsNo + '期'}}</text>
						</view>
					</view>
				</view>

				<view class="payRemindWrapper" v-if="orderInfo.amount>0 && orderInfo.orderStatus != 6">
					<view class="payInfoBox">
						<view class="priceInfo">
							<text>待支付</text>
							<text>{{orderInfo.amount}}</text>
						</view>
						<view class="businessBtn">
							<view class="btn1" v-if="orderInfo.orderStatus == 0" @tap="showCancleAlert = true">取消订单
							</view>
							<view class="btn2" @tap="payOrder">去支付</view>
						</view>
					</view>
				</view>

			</view>
		</view>


		<view class="orderInfoBox" v-if="orderInfo.paymentAmountlist.length > 0 && orderInfo.orderStatus !=8">
			<view class="boxTitle">
				补充金额
			</view>
			<!-- 费用信息 -->
			<view class="amountWrapper">
				<view class="amountDetail" v-for="(item, index) in orderInfo.paymentAmountlist" :key="index">
					<text>{{item.deductionsFor}}</text>
					<text>￥{{item.deductionsAmount}}</text>
				</view>
			</view>

			<view class="payRemindWrapper" v-if="orderInfo.amount>0 && orderInfo.orderStatus != 0">
				<view class="tips">
					温馨提示：补充金额在订单完成后根据燃油，车损，违章押金生成
				</view>
				<view class="payInfoBox">

					<view class="priceInfo">
						<text>待支付</text>
						<text>{{orderInfo.amount}}</text>
					</view>
					<view class="businessBtn">
						<view class="btn2" @tap="payOrder">去支付</view>
					</view>
				</view>
			</view>

		</view>


		<view class="orderInfoBox" v-if="orderInfo.orderStatus >= 4 && orderInfo.orderStatus <= 7"
			@click="goCheckCarInfo()">
			<view class="boxTitle">
				取还单据
			</view>
			<view class="checkCarWrapper">
				<view>
					<view class="checkCarTime">
						<text>取车时间:</text>
						<text>{{orderInfo.actualStartTime}}</text>
					</view>
					<view class="checkCarTime">
						<text>还车时间:</text>
						<text v-if="orderInfo.actualEndTime">{{orderInfo.actualEndTime}}</text>
						<text v-else>待还车</text>
					</view>
				</view>

				<u-icon name="arrow-right"></u-icon>

			</view>
		</view>

		<view class="orderRule" @click="goOrderRule">
			订单计费规则
		</view>

		<u-modal title="提示" content="您确定取消订单吗" :show="showCancleAlert" showCancelButton @confirm="confirmCancle()"
			@cancel="showCancleAlert = false">
		</u-modal>

	</view>
</template>

<script>
	import {
		apiOrderLongInfo,
		cancelOrder,
		againPayOrder
	} from '@/api/longOrder-api.js'
	export default {
		data() {
			return {
				orderNo: '',
				orderInfo: {},
				rentalType: '',
				orderStatus: '',
				showCancleAlert: false,
				type: 1
			}
		},
		computed: {

			memberName() {
				return this.$store.state.user.userInfo.memberName;
			},
			memberPhone() {
				return this.$store.state.user.userInfo.contactPhone;
			},
			userTime() {
				return this.orderInfo.rentalStartTime + '至' + this.orderInfo.rentalEndTime;
			}

		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getOrderDetail();
		},
		methods: {
			getOrderDetail() {
				uni.showLoading({
					title: "加载中...",
				})
				apiOrderLongInfo({
					orderNo: this.orderNo
				}).then(res => {
					uni.hideLoading();
					this.orderInfo = res.data;
				})
			},


			// 导航
			goNaviRoute(type) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: this.orderInfo.takeLat, //要去的纬度-地址
					longitude: this.orderInfo.takeLon, //要去的经度-地址
					name: this.orderInfo.reserveStoreName,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg);
					}
				})

			},
			//拨打电话
			goCallPhone(type) {
				const phone = this.orderInfo.contactStorePhone;
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone,
						success: (res) => {
							console.log('拨打电话成功');
						}
					})
				} else {
					this.$u.toast('手机号为空,无法拨打');
				}

			},

			confirmCancle() {
				this.showCancleAlert = false;
				cancelOrder(this.orderNo).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '订单取消成功',
							icon: 'success'
						})
						uni.navigateBack({})
						uni.$emit('refreshLongOrder');
					}
				})



			},

			//订单支付
			payOrder() {
				uni.showLoading();
				againPayOrder({
					tenantId: this.$store.state.user.tenantId,
					orderNo: this.orderNo,
					amount: this.orderInfo.amount
				}).then(res => {
					uni.hideLoading();
					//唤起微信支付
					let data = JSON.parse(res.data.json)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							uni.$u.toast('支付成功')
							uni.navigateBack({})
							uni.$emit('refreshLongOrder');
						},
						fail: function(err) {
							uni.showToast({
								title: '订单支付失败'
							})
						}
					});
				})
			},

			//押金退款
			goDepositRefund() {
				uni.navigateTo({
					url: './longOrder-depositRefund?orderNo=' + this.orderNo
				})
			},
			//取还单据
			goCheckCarInfo() {
				uni.navigateTo({
					url: '../shortOrder/checkCar-detail?orderNo=' + this.orderNo + '&type=2'
				})
			},
			//订单计费规则
			goOrderRule() {
				uni.navigateTo({
					url: '../../../pages/guide/guide?type=11'
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
	.orderStatusWrapper {
		padding: 30upx 46upx;
		color: $text-color-33;
		font-size: 28upx;

		text {
			display: block;
			margin-top: 18upx;
		}

		text:nth-child(1) {
			font-size: 28upx;
			color: $main-color;
		}
	}

	.orderBasicWrapper {
		margin: 0 22upx 10upx;
		padding: 40upx 26upx 20upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.basicInfo {
			color: $text-color-33;
			font-size: 26upx;
			margin-bottom: 24upx;
		}

		.otherBox {
			display: flex;
			justify-content: flex-end;

			text {
				padding: 0 16upx;
				height: 48upx;
				line-height: 48upx;
				text-align: center;
				border: 1px solid $text-color-99;
				border-radius: 8upx;
				font-size: 26upx;
				color: $text-color-33;
				margin-left: 10upx;

			}
		}
	}

	.orderInfoBox {
		margin: 0 22upx 10upx;
		padding: 70upx 30upx 20upx;
		position: relative;
		left: 0;
		right: 0;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.boxTitle {
			position: absolute;
			top: 23upx;
			left: 0;
			width: 132upx;
			height: 46upx;
			line-height: 46upx;
			text-align: center;
			color: $main-color;
			background-color: #EBF7FE;
			font-size: 26upx;
			font-weight: bold;


		}

		.payTime {
			text-align: right;
			color: $text-color-66;
			font-size: 20upx;
			position: absolute;
			top: 30upx;
			right: 36upx;
		}

		.depositRefund {
			color: $main-color;
			font-size: 26upx;
			font-weight: bold;
			position: absolute;
			top: 23upx;
			right: 10upx;
		}
	}


	.carContent {
		display: flex;
		align-items: center;
		padding: 20upx 0;

		.carImg {
			width: 235upx;
			height: 118upx;
		}

		.carInfo {
			margin-left: 20upx;

			&_name {
				font-size: 28upx;
				font-weight: bold;
			}

			&_other {
				margin-top: 25upx;

				.otherValue {
					color: $text-color-33;
					margin-right: 26upx;
					font-size: 22upx;
				}
			}
		}

	}


	.storeBox {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid $liner-color;
		padding: 20upx 0;

		.left {
			text {
				font-size: 24upx;
				color: $text-color-33;
				margin-right: 20upx;
			}

			text:nth-child(1) {
				color: $text-color-99;
			}
		}

		.right {
			image {
				width: 28upx;
				height: 28upx;
				margin-left: 32upx;
			}
		}
	}

	.timeBox {
		padding: 20upx 0 10upx;

		text {
			font-size: 24upx;
			color: $text-color-33;
			margin-right: 20upx;
		}

		text:nth-child(1) {
			color: $text-color-99;
		}
	}

	.amountWrapper {
		.amountDetail {
			display: flex;
			justify-content: space-between;
			padding: 10upx 15upx 0;

			text {
				font-size: 24upx;
				color: $text-color-33;
			}

			text:nth-child(1) {
				color: $text-color-66;
			}
		}
	}

	.payRemindWrapper {
		margin-top: 20upx;
		border-top: 1px solid $liner-color;

		.tips {
			color: $text-color-66;
			font-size: 20upx;
			margin: 20upx 0 28upx;
		}

		.payInfoBox {
			margin-top: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.priceInfo {
				text:nth-child(1) {
					color: #FF654F;
					font-size: 24upx;
				}

				text:nth-child(2) {
					color: $text-color-33;
					font-size: 34upx;
					font-weight: bold;
					margin-left: 20upx;

					&::before {
						content: '¥';
						color: $text-color-33;
						font-size: 24upx;

					}
				}
			}

			.businessBtn {
				view {
					display: inline-block;
					padding: 0 28upx;
					margin-left: 22upx;
					color: $text-color-ff;
					font-size: 26upx;
					font-weight: bold;
					height: 60upx;
					line-height: 60upx;
					border-radius: 6upx;

				}

				.btn1 {
					background-color: #CECECE;
				}

				.btn2 {
					background-color: $main-color;
				}
			}
		}
	}

	.checkCarWrapper {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.checkCarTime {
			text {
				color: $text-color-33;
				font-size: 26upx;
			}

			text:nth-child(1) {
				color: $text-color-66;
				margin-right: 10upx;
			}
		}
	}

	.orderRule {
		margin: 80upx 0;
		text-align: center;
		color: $main-color;
		font-size: 26upx;
		font-weight: bold;
	}


	.costWrapper {
		.payCost {
			.payCostTitle {
				font-size: 26upx;
				font-weight: bold;
				color: $text-color-33;
				margin: 10upx 0;
			}

			.paymentCost {
				margin-top: 10upx;
				// margin-left: 20upx;
				border: 1px solid $liner-color;
				border-radius: 6upx;
				padding: 0 10upx;

				.amount {
					margin-top: 10upx;

					text {
						color: $text-color-33;
						font-size: 26upx;
					}

					text:nth-child(1) {
						font-size: 30upx;
						font-weight: bold;
						margin-right: 20upx;
					}
					
					.remark {
						color: #EC4863;
						margin-left: 20upx;
					}
				}

				.other {
					margin: 10upx 0;
					display: flex;
					justify-content: space-between;

					text {
						color: $text-color-33;
						font-size: 26upx;

					}
				}
			}
		}
	}
</style>
